<!-- 遥感编目数据推送系统 -->
<template>
  <div class="home">
    <div class="scroll_bg">
      <div class="title_bg"></div>
    </div>
    <div class="home_header">
      <span class="home_header_title">{{ APPNAME }}</span>
      <div class="home_header_btn">
        <div
          class="btn"
          :class="currentView === 'tuiSong' ? 'active' : ''"
          @click="headerClick('tuiSong')"
        >
          <div>精准推送</div>
        </div>
        <div
          class="btn"
          :class="isRating && currentView === 'ratingLog' ? 'active' : ''"
          @click="headerClick('ratingLog')"
        >
          <div>评分配置</div>
        </div>
        <div
          class="btn"
          :class="isRating && currentView === 'setting' ? 'active' : ''"
          @click="headerClick('setting')"
        >
          <div>推送管理</div>
        </div>
        <div
          class="btn"
          :class="currentView === 'zhongdashijian' ? 'active' : ''"
          @click="headerClick('zhongdashijian')"
        >
          <div>重大事件</div>
        </div>
      </div>
    </div>
    <!-- 路由区域  缓存推送页面 -->
    <keep-alive include="tuiSong">
      <router-view class="home_main_view" />
    </keep-alive>
    <!-- 评分配置弹窗 -->
    <el-dialog
      :visible.sync="isRating"
      width="500px"
      top="200px"
      @close="handleClose"
    >
      <!-- <component
        :isRating="isRating"
        :currentView="currentView"
        :is="currentView"
      ></component> -->
      <ratingLog v-if="isRating && currentView === 'ratingLog'" />
      <setting v-else-if="isRating && currentView === 'setting'" />
    </el-dialog>
  </div>
</template>

<script>
import ratingLog from "../../components/RatingLog.vue";
// 加上 .vue 会报错所以去掉了
import setting from "../../components/Setting.vue";
import zhongdashijian from "../../components/Zhongdashijian.vue";
export default {
  components: { ratingLog, setting, zhongdashijian },
  data() {
    return {
      APPNAME: window.APPNAME,
      isRating: false,
      currentView: "", //动态弹窗组件
    };
  },
  watch: {},
  mounted() {},
  methods: {
    // 顶部按钮点击事件
    headerClick(type) {
      this.currentView = type;
      if (type === "tuiSong") {
        this.isRating = false;
        this.$router.push("/");
      } else if (type === "zhongdashijian") {
        this.isRating = false;
        this.$router.push("/zhongdashijian");
      } else {
        this.isRating = true;
      }
      // else if (type === "ratingLog") {
      //   this.isRating = true;
      //   this.currentView = type;
      // } else if (type === "setting") {
      //   this.isRating = true;
      //   this.currentView = type;
      // }
    },
    handleClose() {
      this.isRating = false;
    },
  },
  computed: {},
};
</script>
<style lang="scss">
.home {
  width: 1920px;
  // width: 100%;
  height: 1070px;
  // margin: 0 auto;
  background: #0c272b;
  position: relative;
  font-family: Source Han Sans CN;
  // 顶部
  .scroll_bg {
    position: fixed;
    top: 0;
    width: calc(100% - 19px);
    // width: 100%;
    z-index: 500;
    height: 50px;
    background-color: #0c272b;
    .title_bg {
      margin: 0 auto;
      height: 70px;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-top: 70px solid #0c272b;
      width: 520px;
    }
  }
  .home_header {
    position: fixed;
    top: 0;
    z-index: 998;
    width: 100%;
    height: 78px;
    background-image: url("../../assets/image/组 1.png");
    background-size: 100% 100%;
    // 字
    text-align: center;
    color: white;
    font-size: 24px;
    padding-top: 10px;
    font-weight: bold;
    color: #ffffff;
    line-height: 41px;
    // 顶部标题
    .home_header_title {
      -webkit-animation: tracking-in-expand-fwd 0.8s
        cubic-bezier(0.215, 0.61, 0.355, 1) both;
      animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.61, 0.355, 1)
        both;
    }
    // 顶部按钮
    .home_header_btn {
      position: absolute;
      top: 8px;
      left: 1238px;
      font-size: 16px;
      font-weight: 500;
      color: #10282e;
      line-height: 24px;
      display: flex;
      .btn {
        background-color: #2ed97a33;
        height: 34px;
        width: 128px;
        margin-right: 4px;
        line-height: 34px;
        color: #2ed97a;
        cursor: pointer;
        // 菱形按钮
        transform: rotate(0deg) scale(1, 1) skew(-30deg, 0deg)
          translate(14px, 0px);
        // 按钮字体纠正
        > div {
          transform: rotate(0deg) scale(1, 1) skew(30deg, 0deg)
            translate(0px, 0px);
        }
      }
      .active {
        background-color: #2ed97a;
        color: #10282e;
      }
    }
  }
  // 内容区域
  .home_main_view {
    width: 1876px;
    height: 1012px;
    background-image: url("../../assets/image/矩形 1.png");
    background-size: 100% 100%;
    position: absolute;
    top: 48px;
    left: 20px;
    padding: 40px 30px 20px;
  }
}
// 弹框 样式
.el-dialog__header {
  display: none;
}
.el-dialog__body {
  // height: 380px;
  background-image: url("../../assets/image/矩形 6.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // 按钮
  .dialog_footer {
    display: flex;
    width: 234px !important;
    margin: 10px auto;
    .dialog_btn {
      width: 110px;
      height: 50px;
      background: #0c272b;
      border: 1px solid #2fab7d;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #baffe5;
      border-radius: 2px;
      cursor: pointer;
    }
    .active {
      background: #065c43 !important;
    }
    .dialog_btn + .dialog_btn {
      margin-left: 10px;
    }
  }
  /* ----------------------------------------------
 * Generated by Animista on 2021-9-2 10:10:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

  /**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
  @-webkit-keyframes tracking-in-expand-fwd {
    0% {
      letter-spacing: -0.5em;
      -webkit-transform: translateZ(-700px);
      transform: translateZ(-700px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand-fwd {
    0% {
      letter-spacing: -0.5em;
      -webkit-transform: translateZ(-700px);
      transform: translateZ(-700px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }
}
</style>
